<template>
<div style="background-color: var(--bg);height: 100vh">
    <van-nav-bar
        :title="$t('wallet.exchangeInte')"
        left-arrow
        @click-left="router.back()"
    >
        <template #right>
            <div class="exchangeInte-history" @click="onJump('/balance')">
                {{ $t('wallet.exchHistory') }}
            </div>
        </template>
    </van-nav-bar>
    <div class="exchangeInte exchangeInte-bg">
        <div class="exchangeInte-inte-detail">
            {{ $t('wallet.exchType') }}
        </div>
        <div class="exchangeInte-card on-choose">   
            {{ $t('wallet.exchToCard') }}
            <img src="@/assets/images/right.png" alt="" class="exchangeInte-right">
        </div>
        <br>
        <br>    
        <div class="exchangeInte-inte-detail">
            {{ $t('wallet.chooseExch') }}
        </div>
        <div class="exchangeInte-flex">
            <template v-for="item in money.list" :key="item.num">
                <div class="exchangeInte-card" :class="{'on-choose': money.chooseNum == item.num }" @click="onChooseNum(item.num)">
                    {{$t('moneyIcon')}}{{ item.num }}
                    <img src="@/assets/images/right.png" alt="" v-if="money.chooseNum == item.num" class="exchangeInte-right">
                </div>
            </template>
        </div>
        <div class="app-flex-bet exchangeInte-detail">
            <div>
                {{ $t('wallet.exchangeRate') }}: {{ route.query.scale }}{{ $t('wallet.inte') }}={{ $t('moneyIcon') }}1
            </div>
            <div>
                {{ $t("wallet.allInte") }}: <span style="color: var(--primary)">{{ route.query.all }}{{ $t('wallet.inte')}}</span>
            </div>
        </div>

    </div>
    <div class="exchangeInte">
        <van-button round type="primary" :loading="loading" block @click="onExchangeMoney" class="exchangeInte-btn">{{ $t('wallet.exchange') }}</van-button>
    </div>
</div>
</template>
<script setup>
import { reactive, ref } from '@vue/reactivity';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from "vue-router"
import { exchangeMoney } from "@/api/card";
import { Toast } from "vant";
const { t } = useI18n();
const router = useRouter()
const route = useRoute()
const money = reactive({
    list: [
        { num: 10, choose: false },
        { num: 20, choose: false },
        { num: 200, choose: false },
    ],
    chooseNum: 10,
    loading: false
})
function onChooseNum (num) {
    money.chooseNum = num
}
function onExchangeMoney () {
    money.loading = true
    exchangeMoney(money.chooseNum).then(res => {
        console.log(res)
        if (res.code != 200) return 
        Toast(t('pcPerson.redeSuccess'))
        setTimeout(() => {
            router.back()
        }, 500)
    }).finally(() => {
        money.loading = false
    })
}
// 跳转兑换记录
function onJump (path) {
    router.push({
        path,
        query: {
            type: 3
        }
    })
}
</script>
<style lang="less">
.exchangeInte {
    padding: 15px 20px;
    &-inte-detail {
        font-size: 16px;
        font-family: PingFang SC;
        color: #333333;
        line-height: 1;
        position: relative;
        padding: 0 5px;
        font-weight: 600;
    }
    &-history {
        font-size: 12px;
        color: #999;
        font-weight: 400;
    }
    &-bg {
        background: #fff;
    }
    &-detail {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #666666;
        margin-top: 10px;
    }
    .my-inte-detail::before {
        background: var(--title-background-color);
        content: "  ";
        display: inline-block;
        width: 4px;
        height: 15px;
        position: absolute;
        top: 1px;
        left: -3px;
    }
    &-flex  {
        display: flex;
        justify-content: space-around;
        .exchangeInte-card {
            padding: 14px 0px;
            width: 100px;
            text-align: center;
        }
    }
    &-card {
        padding: 14px 20px;
        margin-top: 16px;
        display: inline-block;
        line-height: 1;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        background: #F0F3F5 ;
        border: 1px solid #ccc;
        border-radius: 5px;
        position: relative;
    }
    .on-choose {
        border: 1px solid var(--primary);
        background: #FDE5F3;
        color: var(--primary);
    }
    &-right {
        position: absolute;
        right: -1px;
        top: -1px;
        height: 25px;
    }
    &-btn {
        margin-top: 50px;
    }
}

</style>